<template>
  <!--充值币-->
  <view class="h-20 bg-indigo-400 px-4 flex items-center">
    <!--<view class="w-14 h-14 bg-stone-200 rounded-full"></view>-->
    <image class="w-14 h-14 rounded-full" :src="userInfoData.userInfo.avatar"></image>
    <view class="ml-4 h-14 text-white flex flex-col justify-around">
      <view>账户余额(币)</view>
      <view>{{ userInfoData.userInfo.market_coin }}</view>
    </view>
    <view class="w-16 h-6 ml-auto flex justify-center items-center text-sm border border-solid border-white rounded-2xl text-center text-white" @click="jumpCoinList">
      明细
    </view>
  </view>
  <view class="h-10 flex border-bottom">
    <view class="flex-1 flex items-center justify-center" @click="selectRechargeType(0)" :class="rechargeType == 0 ? 'selectedType' : ''">营销币充值</view>
    <!--<view class="flex-1 flex items-center justify-center" @click="selectRechargeType(1)" :class="rechargeType == 1 ? 'selectedType' : ''">普通充值</view>-->
  </view>
  <view class="py-1 border-bottom">
    <view class="flex justify-between px-4">
      <view class="text-slate-400 text-sm">上个月累计充值</view>
      <view class="text-slate-400 text-sm">{{ lastMoneyRecharge }}元</view>
    </view>
    <view class="flex justify-between px-4">
      <view class="text-slate-400 text-sm">享受折扣</view>
      <view class="text-slate-400 text-sm">{{ discount }}折</view>
    </view>
    <view class="flex justify-between px-4">
      <view class="text-slate-400 text-sm">一共可购买金币</view>
      <view class="text-slate-400 text-sm">{{ totalCoin }}</view>
    </view>
    <view class="flex justify-between px-4">
      <view class="text-slate-400 text-sm">已购买金币</view>
      <view class="text-slate-400 text-sm">{{ rechargeMoney }}</view>
    </view>
    <view class="flex justify-between px-4">
      <view class="text-slate-400 text-sm">计算方式</view>
      <view class="text-slate-400 text-sm">{{ lastMoneyRecharge }}*10%*10/{{ discount }}%</view>
    </view>
  </view>
  <view class="h-8 border-bottom">
    <view class="px-4 h-full flex items-center justify-between">
      <view class="text-gray-400 text-sm">请选择金币</view>
      <view class="text-sm flex items-center">
        还可以购买营销币:  {{ buyCoin }}
        <image @click="popupValue = true" class="w-4 h-4 ml-2" src="@/static/image/issue.png"></image>
      </view>
    </view>
  </view>

  <view class="px-4 mt-4 coin-select pb-4 border-bottom">
    <view :class="coinType == 0 ? 'selectCoin' : ''" @click="selectCoin(0)">100000金币</view>
    <view :class="coinType == 1 ? 'selectCoin' : ''" @click="selectCoin(1)">10000金币</view>
    <view :class="coinType == 2 ? 'selectCoin' : ''" @click="selectCoin(2)">500金币</view>
    <view :class="coinType == 4 ? 'selectCoin' : ''" @click="selectCoin(4)">其他金币</view>
  </view>
  <view class="border-bottom h-12 bg-white flex items-center" v-if="coinType == 4">
    <view class="w-28 pl-4 text-gray-400 text-sm">充值金币</view>
    <input class="text-right flex-1 text-sm h-full pr-5" @keyup="payMoney=payMoney.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入充值金币" placeholder-class="plcg" v-model="payMoney" />
  </view>

  <view class="h-8 border-bottom">
    <view class="px-4 h-full flex items-center justify-between text-sm text-gray-400">
      请选择支付方式
    </view>
  </view>
  <view>
    <radio-group @change="selectPayType">
      <label class="border-bottom">
        <view class="px-4 py-2 flex items-center justify-between">
          <view class="text-sm">余额支付</view>

          <view>
            <radio value="1" :checked="payType == 1"></radio>
          </view>
        </view>
      </label>
    </radio-group>
  </view>


  <view class="px-10 mt-6">
    <view @click="payCoin" class="h-8 flex bg-indigo-400 justify-center items-center rounded-2xl text-white">立即支付￥ {{ sum }}</view>
  </view>

  <uiwu-popup v-model="popupValue">
    <view class="w-4/5 bg-white m-auto mt-36 p-4 box-border rounded-xl">
      <view class="text-center relative">
        营销币购买规则
        <image @click="popupValue = false" class="w-5 h-5 absolute top-0 right-0" src="@/static/image/close.png"></image>
      </view>
      <view class="text-sm">
        <view class="mt-1">1.根据营收总金额，商户可尊享【打折特惠币】,【打折特惠币】总额&lt;=营收总额的10%:</view>
        <view class="indent-4 my-1">【打折特惠营销币】享9折;</view>
        <!-- <view class="indent-4 mb-1">(2) 50000元&lt;上月营收&lt;=100000元时，【打折特惠营销币】享6折;</view>
        <view class="indent-4 mb-1">(3) 上月营收元>100000元时，【打折特惠营销币】5.5 折;</view>
        <view>例如:营收总额1000元，属于情况:</view>
        <view class="indent-4">(1) 最多买【6.5折特惠营销币】1000*10%*10/0.65-1538币,营销市向下取整(如1538346币，取1538币)</view>
        <view class="indent-4">(2) 超过【打折特惠营销币】限额后，商户可按照原价购买营销币;</view>
        <view class="indent-4">(3) 营收总额只限于本账户营收全额，不包括其他收入;</view> -->
      </view>

    </view>
  </uiwu-popup>

</template>

<script setup lang="ts">
    import { getUserRechargeCoinApi, doUserRechargeMarketCoinApi } from '@/api/marketing'
    import { ref, onMounted, computed } from 'vue'
    import { throttle } from '@/api/common'
    import { userStore } from "@/store/userStore";
    import {uiwu} from "@/api/interface/interface";

    const userInfoData = userStore()

    onMounted(() => {
      getCoinNum()
    })

    const jumpCoinList = () => {
      uni.navigateTo({ url: '/pages/mine/coinList' })
    }

    /** 获取用户可以充值营销币数值 **/
    const totalCoin = ref<string>('')
    const buyCoin = ref<string>('')
    const rechargeMoney = ref<string>('')
    const lastMoneyRecharge = ref<string>('')
    const discount = ref<number>(0) // 折扣
    const getCoinNum = async () => {

      const res = await getUserRechargeCoinApi()
      const { buy_coin, total, recharge_money, up_month_recharge_money, clac  } = res.data
      discount.value = clac / 10
      // if(Number(up_month_recharge_money) < 50000 && Number(up_month_recharge_money) > 0) {
      //   discount.value = 6.5
      // }else if(Number(up_month_recharge_money) > 100000 ) {
      //   discount.value = 5.5
      // }else if (Number(up_month_recharge_money) <= 100000  && Number(up_month_recharge_money) >= 50000) {
      //   discount.value = 6
      // }

      buyCoin.value = buy_coin
      totalCoin.value = total
      rechargeMoney.value = recharge_money
      lastMoneyRecharge.value = up_month_recharge_money

      // recharge_money.value = recharge_money
      // up_month_recharge_money.value = up_month_recharge_money
    }

    const payMoney = ref<string>("100000")
    /** 选择充值金币 **/
    const coinType = ref<number>(0)
    const selectCoin = (type) => {
      const brr = ['100000', '10000', '500']
      payMoney.value = brr[type]
      if(type == 4) { payMoney.value = '' }
      coinType.value = type
    }

    const sum = computed(() => {
      return (Number(payMoney.value) / 100 * discount.value).toFixed(2)
    })

    const popupValue = ref(false)

    const payType = ref(1)
    /** 充值类型的选择 **/
    const rechargeType = ref<number>(0)
    const selectRechargeType = (type: number) => {
      rechargeType.value = type
    }

    /** 选择支付方式 **/
    const selectPayType = (e) => {
      payType.value = Number(e.detail.value)
    }

    const payCoin = throttle( async() => {
      if (!payMoney.value) {
        return uiwu.toast('请先填写充值金币')
      }

      const res = await doUserRechargeMarketCoinApi({
        coin: payMoney.value,
        pay_type: 'wallet'
      })
      if(res.status == 200) {
        userInfoData.updateUserInfo()
        getCoinNum()
        setTimeout(() => {
          uni.navigateBack()
        }, 2500)
        uiwu.toast(res.msg)
      }
    }, 3000 )


</script>

<style scoped lang="scss">
.selectedType {
  color: #1684fc;
}
.coin-select {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20rpx;
  &>view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    border: 2rpx solid #ccc;
    font-size: 26rpx;
    border-radius: 10rpx;
  }
  .selectCoin {
    border: 2rpx solid #edb066;
  }
}
</style>
